      body {
        margin: 0;
        height: 100vh;
        /* background-image: url("./TP/SKY0.jpg"); */
        background: linear-gradient(200deg,#6d90d1,#dd82f7);
        background-size: 100% 100%;
        /* background-attachment: fixed; */
      }
.loadingSeven{
    width: 80px;
    height: 40px;
    margin: 0 auto;
}
.loadingSeven span{
    display: inline-block;
    width: 8px;
    height: 100%;
    border-radius: 4px;
    background: #ccffcc;
    -webkit-animation: loadsaven 1.04s ease infinite;
}
@-webkit-keyframes loadsaven{
    0%,100%{
        height: 40px;
        background: #ccffcc;
    }
    50%{
        height: 60px;
        margin-top: -20px;
        background: #33ccff;
    }
}
.loadingSeven span:nth-child(2){
    -webkit-animation-delay:0.13s;
}
.loadingSeven span:nth-child(3){
    -webkit-animation-delay:0.26s;
}
.loadingSeven span:nth-child(4){
    -webkit-animation-delay:0.39s;
}
.loadingSeven span:nth-child(5){
    -webkit-animation-delay:0.52s;
}
.nav {
  position: sticky;
  top:0;
}

#yingcang {width: 100%;height: 100%;display: flex;position:absolute;justify-conent:center;align-items: center;}
      /* *{
        border: 1px solid black;
      } */
      .yinying {
        box-shadow: rgba(0, 0, 0, 0.5) 3px 4px 4px 1px;
      }
      .baise {
        background-color: rgba(0, 0, 0, 0.233);
        backdrop-filter: blur(2px);
      }
      .flex {
        display: flex;
      }
      .flex1 {
        flex: 1;
        background-color: rgba(0, 0, 0, 0);
      }
      .flex2 {
        display: flex;
        align-items: center;
        justify-content: space-evenly;
        font-size: 50px;
        color: antiquewhite;
      }
      .flex3 {
        flex: 1;
      }
      .column {
        flex-direction: column;
      }
      .mg8 {
        margin: 7px;
      }
      .mgr8 {
        margin-right: 7px;
      }
      .mgt8 {
        margin-top: 7px;
      }
      .bt {
        font-family: serif;
        text-shadow: 4px 4px 10px rgb(255, 255, 255);
      }
      .dw {
        position: absolute;
        top: 95px;
        left: 0px;
      }
      .footer {
        color: #fff;
        /* position: absolute; */
        width: 100%;
        bottom: 0px;
      }


/* 侧边导航栏 */
      * {  
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      .iconfont {
        font-size: 35px !important;
        color: rgb(2, 141, 255);
        line-height: 50px;
        text-align: center;
      }
      .munu-box {
        width: 50px;
        height: 85.2vh;
        background-color: rgba(0, 0, 0, 0.2);
        /* 过渡动画 */
        transition: all .2s ease-out;
        overflow: hidden;
      }

      .munu-box:hover {
        width: 110px;
        background-color: rgba(0, 0, 0, 0.8);
        box-shadow:rgba(0, 0, 0, 0.8) 0px 5px 10px 4px;
        backdrop-filter: blur(5px);
      }
      
      .munu-box:hover>ul>li p {
        display: block;
      }

      /*表情盒子*/
      .emotion-box {
        width: 100%;
        text-align: center;
        margin: 5px auto;
      }

      #emotion1,
      #emotion2 {
        color: rgb(235, 241, 255);
        font-size: 55px !important;
      }

      #emotion2 {
        display: none;
      }

      .munu-box:hover #emotion1 {
        display: none;
      }
      .munu-box:hover #emotion2 {
        display: block;
      }

      ul {
        width: 100%;
        height: 75%;
      }

      li {
        list-style: none;
      }

      li>a {
        display: flex;
        justify-content: center;
        align-items: center;
        text-decoration: none;
        user-select: none;
      }  
      li:hover {
        cursor: pointer;
      }
      li:hover .content,
      li:hover i {
        color: aqua;
      }
      .content {
        display: none;
        padding-left: 4px;
        color: rgb(255, 254, 254);
        white-space: nowrap;
        transition: all .2s ease-out;
      }


/* 动态背景 */
      ul.bj li {
          position: absolute;
          border: 1px solid #fff;
          background-color: #fff;
          width: 30px;
          height: 30px;
          list-style: none;
          opacity: 0;
      }
      .square li {
          top: 70vh;
          left: 40%;
          animation: square 10s linear infinite;
      }
      .square li:nth-child(2){
          top: 80vh;
          left: 10%;
          animation-delay: 2s;
      }
      .square li:nth-child(3){
          top: 70vh;
          left: 65%;
          animation-delay: 4s;
      }
      .square li:nth-child(4){
          top: 60vh;
          left: 50%;
          animation-delay: 6s;
      }
      .square li:nth-child(5){
          top: 10vh;
          left: 70%;
          animation-delay: 8s;
      }
      .circle li {
          bottom: 0;
          left: 15%;
          animation: circle 10s linear infinite;
      }

      .circle li:nth-child(2){
          left: 45%;
          animation-delay: 2s;
      }
      .circle li:nth-child(3){
          left: 80%;
          animation-delay: 4s;
      }
      .circle li:nth-child(4){
          left: 25%;
          animation-delay: 6s;
      }
      .circle li:nth-child(5){
          left: 65%;
          animation-delay: 8s;
      }
      @keyframes square {
          0% {
              transform: scale(0) rotateY(0deg);
              opacity: 1;
          }
          100% {
              transform: scale(5) rotateY(1000deg);
              opacity: 0;
          }
      }
      @keyframes circle {
          0% {
              transform: scale(0) rotateY(0deg);
              opacity: 1;
              bottom: 0;
              border-radius: 0;
          }
          100% {
              transform: scale(5) rotateY(1000deg);
              opacity: 0;
              bottom: 100vh;
              border-radius: 50%;
          }
      }


/* 音乐播放器 */
@import url('https://fonts.googleapis.com/css?family=Lato&display=swap');

.bfq {
    height: 100%;
    width: 100%;
    display: flex;
    /* 沿垂直主轴上下垂直排列 */
    flex-direction: column;
    align-items: flex-end;
    font-family: 'Lato', sans-serif;
    margin: 0;
}

.music-container {
    background-color: rgba(255, 255, 255, 1);
    border-radius: 15px;
    display: flex;
    padding: 20px 30px;
    position: relative;
    margin: 90px 0;
    z-index: 10;
}

.img-container {
    position: relative;
    width: 110px;
}

.img-container::after {
    content: "";
    background-color: #fff;
    border-radius: 50%;
    position: absolute;
    bottom: 100%;
    left: 50%;
    width: 15px;
    height: 15px;
    /* 旋转 */
    transform: translate(-50%, 50%);
}

.img-container img {
    border-radius: 50%;
    height: 110px;
    width: inherit;
    object-fit: cover;
    position: absolute;
    bottom: 0;
    left: 0;
    /* 封面360°旋转，默认不动 */
    animation: rotate 3s linear infinite;
    animation-play-state: paused;
}

.music-container.play .img-container img {
    /* 播放 */
    animation-play-state: running;
}

/* 定义旋转动画 */
@keyframes rotate {
    from {
        transform: rotate(0);
    }

    to {
        transform: rotate(360deg);
    }
}

.navigation {
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

.action-btn {
    /* 取消默认样式 */
    border: 0;
    background-color: #fff;
    /* ----- */
    color: #0decfc;
    font-size: 20px;
    cursor: pointer;
    padding: 10px;
    margin: 0 20px;
}

.action-btn:focus {
    /* 取消默认样式 */
    outline: 0;
}

.action-btn.action-btn-big {
    color: #0cdae9;
    font-size: 30px;
}

.music-info {
    position: absolute;
    top: 0;
    left: 20px;
    /* 父元素宽度-40px */
    width: calc(100% - 40px);
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 15px 15px 0 0;
    padding: 10px 10px 10px 150px;
    /* 没播放时默认隐藏 */
    opacity: 0;
    transform: translateY(0%);
    transition: transform 0.3s ease-in, opacity 0.3s ease-in;
    z-index: 0;
}

.music-info h4 {
    /* 取消默认边距 */
    margin: 0;
}

.music-container.play .music-info {
    opacity: 1;
    transform: translateY(-100%);
}


.progress-container {
    background-color: #fff;
    border-radius: 5px;
    cursor: pointer;
    margin: 10px 0;
    height: 4px;
    width: 100%;
}

.progress {
    background-color: #0decfc;
    border-radius: 5px;
    height: 100%;
    /* 一开始进度条长度为0 */
    width: 0%;
    transition: width 0.1s linear;

}